<template>
    <div class="info">
        <el-row>
            <el-col :xs="4" :sm="4" :md="4" :lg="4">
                <div class="treeCard">
                    <el-input v-model="filterText" placeholder="输入关键字进行过滤" clearable size="mini"
                        style="margin-bottom:10px"></el-input>
                    <el-tree class="filter-tree" :data="treeData" :props="defaultProps" default-expand-all
                        :expand-on-click-node='false' node-key="id" @node-click='nodeClick' highlight-current
                        :filter-node-method="filterNode" ref="tree">
                    </el-tree>
                </div>
            </el-col>
            <el-col :xs="20" :sm="20" :md="20" :lg="20" style="padding-left:20px">
                <div class="createDevice">
                    <div>
                        <my-button type="primary" size="mini" icon="el-icon-circle-plus-outline"
                            :disabled="searchForm.groupId === ''" @btnClick="handleEvent({type:'add',groupId:searchForm.groupId})">添加设备
                        </my-button>
                        <el-dropdown trigger="click">
                            <el-button type="primary" size="mini" icon="el-icon-s-operation" style='margin:0 10px'
                                :disabled="multipleSelection.length === 0">批量操作
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button type="text" size="mini" icon="el-icon-delete"
                                        @click="batchDel"
                                        >批量删除</el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" size="mini" icon="el-icon-link"
                                        @click="batchUnbind"
                                        >批量解绑</el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <my-button type="primary" size="mini" icon="el-icon-download" plain
                            @btnClick='batchImport' :disabled="searchForm.groupId === ''">批量导入</my-button>
                        <my-button type="text" size="mini" icon="el-icon-time" @btnClick="operateDrawer">操作记录</my-button>
                    </div>
                    <div class="search">
                        <el-input v-model="searchForm.deviceNameOrSn" placeholder="输入设备编号/设备名称" clearable size="mini">
                            <my-button type="primary" size="mini" slot="append" icon="el-icon-search"
                                @btnClick='updateList'></my-button>
                        </el-input>
                    </div>
                </div>
                <!-- 表格 -->
                <table-list :searchForm='searchForm' ref='tableList' @handleEvent='handleEvent' @picture='picture'
                    @multiple='multiple'>
                </table-list>
            </el-col>
        </el-row>

        <myDialog ref="myDialog" @updateList='updateList'></myDialog>

        <!-- 操作记录 -->
        <operationHistory ref="operationHistory"></operationHistory>

        <!-- 导入 -->
        <import-mould title='设备' ref='importMould' @importSuccess='importSuccess'></import-mould>
    </div>
</template>

<script>
    import {
        treeList
    } from '@/api/treeController'
    import myDialog from './myDialog.vue'
    import tableList from './tableList.vue'
    import operationHistory from './operationHistory.vue'
    export default {
        data() {
            return {
                filterText: '',
                treeData: [],
                multipleSelection:[],
                searchForm: {
                    deviceNameOrSn: '',
                    groupId: '',
                    page: 1,
                    limit: 10
                },
                defaultProps: {
                    children: 'child',
                    label: 'label'
                },
            }
        },
        components: {
            myDialog,
            tableList,
            operationHistory
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.getTreeList()
        },
        methods: {
            //树列表
            getTreeList() {
                treeList().then(res => {
                    if (res.code == 200) {
                        const all = {
                            child: null,
                            id: '',
                            label: "全部",
                            parentId: "0"
                        }
                        this.treeData = [all, ...res.data]
                        this.$nextTick(() => {
                            this.$refs.tree.setCurrentKey(this.treeData[0].id)
                        })
                    }
                })
            },
            nodeClick(node) {
                this.searchForm.groupId = node.id
                this.$refs.tableList.getDeviceList(this.searchForm)
            },
            handleEvent(payload) {
                this.$nextTick(() => {
                    this.$refs.myDialog.open(payload)
                })
            },
            updateList() {
                this.$refs.tableList.getDeviceList(this.searchForm)
            },
            picture(file) {
                this.$refs.myDialog.handlePictureCardPreview(file)
            },
            //批量删除
            batchDel(){
                this.$refs.tableList.batchDel()
            },
            //批量解绑
            batchUnbind(){
                this.$refs.tableList.batchUnbind()
            },
            //批量导入
            batchImport(){
                const obj = {
                    type: 'device',
                    importUrl: '/device/deviceImport',
                    groupId:this.searchForm.groupId,
                    isCover:false
                }
                this.$refs.importMould.openDialog(obj)
            },
            importSuccess(){
                this.updateList()
            },
            //操作记录
            operateDrawer(){
                this.$refs.operationHistory.handle()
            },
            multiple(val){
                this.multipleSelection = val
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(window.deviceTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .info {
        padding: 20px;
        height: 100%;
        overflow-y: auto;

        .treeCard {
            padding: 20px;
            border: 1px solid #d7dae2;
            border-radius: 4px;
        }

        .createDevice {
            display: flex;
            padding: 20px 0;
            justify-content: space-between;
        }
    }
</style>